<template>
  <div>
    <a-spin :spinning="loading">
      <a-divider orientation="left"><span class="text-bold">管理员设置</span></a-divider>
      <a-form class="ant-advanced-search-form" :form="form">
        <a-row>
          <a-col :span="24">
            <a-form-item label="超级管理员：" :label-col="labelCol" :wrapper-col="wrapperCol">
              <user-popup
                  :visible="visiblePopup"
                  style="width: 100%;"
                  @change="(value, other) => popupCallback(value, other)"
                  @close="() => (visiblePopup = false)"
                  :typeNum="1"
              />
              <a-input
                  @click="() => { visiblePopup = true ;}"
                  placeholder="请选择公司负责人"
                  readOnly
              >
                <!--v-decorator="[-->
                <!--'reportsTo',-->
                <!--{ rules: [{ required: true, message: '公司负责人' }] },-->
                <!--]"-->
                <a-icon slot="prefix" type="user"/>
              </a-input>
              <span style="color: red">注意超级管理员拥有系统所有权限!</span>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="管理员登录IP过滤:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-switch default-checked v-model="form.IPFilter"></a-switch>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item :label="'IP地址列表 ：'" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="form.IPFilter">
              <a-textarea placeholder="多个IP地址，用英文逗号分开" :auto-size="{ minRows: 3, maxRows: 5 }" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </div>
</template>

<script>
  import pick from "lodash.pick";
  import AFormItem from "ant-design-vue/es/form/FormItem";
  import UserPopup from "@/components/TopVUI/custom/userPopup";

  // import imgUpload from "./imgUpload.vue";
  // 表单字段
  const fields = [];

  export default {
    components: {
      AFormItem,
      UserPopup
    },
    data() {
      return {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          }
        },
        // form: this.$form.createForm(this),
        model: {},
        loading: false,
        radioStyle: {
          display: 'block',
          height: '30px',
          lineHeight: '30px',
        },
        visiblePopup: false,
        form:{
          IPFilter:true
        },
      };
    },
    created() {
      // fields.forEach((v) => this.form.getFieldDecorator(v));
      // this.$post("/system/config/selectAll", {}).then(res => {
      //   res.forEach(item => {
      //     this.$set(this.model,item.code,item.value)
      //   })
      //   this.form.setFieldsValue(pick(this.model, fields))
      // })
    },
    methods: {
      popupCallback(value) {
        console.log(value)
        // this.form.setFieldsValue({
        //   reportsTo: value.userName
        // });
      },
      save() {
        this.form.validateFields((err, values) => {
          if (!err) {
            // this.loading = true
            // let param = []
            // for(let key in values){
            //   param.push({
            //     code: key,
            //     value: values[key]
            //   })
            // }
            // this.$post(
            //   "/system/config/save",
            //   {
            //     param: JSON.stringify(param)
            //   }
            // ).then(res => {
            //   this.$message.success(res.message);
            //   this.loading = false
            // })
          } else {
            this.$message.warning("请将信息填写完整！");
          }
        });
      },
    },
  };
</script>

<style scoped>

</style>
